<template>
	<view class="content">
		<!-- 评分 -->
		<view class="rating-box box">
			<text class="score-title">评分</text>
			<view class="star-row">
				<u-rate :count="count" v-model="formData.score" active-color="#FFC400" :allowHalf="true" size="25" @change="formatRating"></u-rate>
				<text class="rating-score">{{rating}}</text>
			</view>
		</view>

		<!-- 评价内容 -->
		<view class="comment-box box">
			<text class="section-title">评价内容</text>
			<textarea 
				class="comment-textarea" 
				placeholder="请输入评价内容" 
				v-model="formData.content"
				placeholder-style="color: #AAAAAA; font-size: 28rpx;"
			></textarea>
		</view>

		<!-- 图片上传 -->
		<view class="upload-box box">
			<text class="section-title">图片</text>
			<view class="upload-content">
				<view class="image-list">
					<view v-for="(item, index) in formData.images" :key="index" class="image-item">
						<image :src="item" mode="aspectFill" class="uploaded-image" @tap="previewImage(index)"></image>
						<view class="delete-btn" @tap.stop="deleteImage(index)">
							<u-icon name="close" color="#fff" size="20"></u-icon>
						</view>
					</view>
					<view class="upload-btn" @tap="chooseImage" v-if="formData.images.length < 9">
						<u-icon name="photo" size="40" color="#AAAAAA"></u-icon>
						<text>添加图片</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @tap="submitReview">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rating: '5.0',
                count: 5,
				formData: {
					stationId: 0, // 电站id
					score: 5,
					content: '',
					images: [],
					userName: '',
					chargingOrderId: 0
				}
			}
		},
		onLoad({ id, orderId }) {
			this.formData.stationId = parseInt(id);
			this.formData.chargingOrderId = parseInt(orderId)
			if (!id) {
				uni.$u.toast('订单不存在')
				setTimeout(() => uni.navigateBack(), 1000)
			}
			const userInfo = uni.getStorageSync('userinfo')
			if (userInfo.avatar != '') {
				this.formData.userAvatar = userInfo.avatar
			}
			this.formData.userName = userInfo.nickname || '德亿安'
		},
		methods: {
            formatRating(value) {
                if (value % 1 === 0) {
                    this.rating = value + '.0'; 
                } else {
                    this.rating = value;
                }
            },
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.formData.images.length,
					success: (res) => {
						this.$http_api.uploadFiles(res.tempFilePaths).then(fileUrls => {
							fileUrls.forEach(url => this.formData.images.push(url));
						});
					}
				})
			},
			submitReview() {
				if (this.formData.content == '') {
					return uni.$u.toast('请输入评论内容')
				}
				if (this.formData.userName == '' || this.formData.userAvatar == '') {
					return uni.$u.toast('请完善个人信息')
				}
				this.$http_api.addStationComment(this.formData).then(res => {
					if (!res) return; 
					uni.$u.toast('评论成功');
					setTimeout(() => uni.navigateBack(), 1000);
				});
			},
			// 添加预览图片方法
			previewImage(index) {
				uni.previewImage({
					urls: this.images,
					current: index
				});
			},
			
			// 添加删除图片方法
			deleteImage(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.images.splice(index, 1);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		background-color: #F5F5F5;
		min-height: 100vh;
	}

	.box {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		display: block;
	}

    .rating-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .score-title {
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
        }
    }

	.star-row {
		display: flex;
		align-items: center;
		
		.star-wrapper {
			display: flex;
			gap: 10rpx;
		}

		
		.rating-score {
			color: #FC0A01;
			font-size: 38rpx;
			margin-left: 20rpx;
		}
	}

	.comment-textarea {
		width: 100%;
		height: 200rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-radius: 10rpx;
		background-color: #F8F8F8;
	}

	.upload-content {
		.image-list {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			
			.image-item {
				position: relative;
				width: 160rpx;
				height: 160rpx;
				
				.uploaded-image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				
				.delete-btn {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					width: 40rpx;
					height: 40rpx;
					background-color: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 1;
				}
			}
			
			.upload-btn {
				width: 160rpx;
				height: 160rpx;
				background-color: #F8F8F8;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				text {
					font-size: 24rpx;
					color: #AAAAAA;
					margin-top: 10rpx;
				}
			}
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		background: #1C6EFB;
		color: #fff;
		text-align: center;
		padding: 25rpx 0;
		border-radius: 50rpx;
		font-size: 32rpx;
	}
</style> 